<!--@author vidy3587@gmail.com-->
<template>
  <div class="short-video-page with-padding-bottom">
    <div class="with-banner">
      <CloudCard cloud-class="bg2" title="赛程赛制">
        凡平台注册玩家均可参赛，参赛者可以个人或团体形式拍摄视频参赛，一个注册账号只允许提交一份作品。每个注册账号每天最多投三票。
      </CloudCard>
      <div class="purple-card info-card">
        <schedule></schedule>
        <button class="pink-btn btn block card-btn">查看排行榜</button>
      </div>
      <div class="row horizontal-middle search-row">
        <PinkSearchBar></PinkSearchBar>
      </div>
      <div class="card vote-card">
        <div class="title-bar card-title">
          托票区
        </div>
        <div class="grid-list">
          <div class="grid-card" v-for="item in voteList" :key="item.number">
            <div class="vote-rank">
              <span class="row rank-col horizontal-middle">{{ item.number }}号</span>
              <span class="row rank-col horizontal-middle">第<span class="warning">{{ item.rank }}</span>名 <img
                  class="fire-icon" src="@/assets/fire.png" alt=""></span>
            </div>
            <div class="video-box">
              <img :src="item.headImgUrl" class="vote-avatar" alt="">
              <div class="vote-badge row">
                <span>{{ item.ticketNum }}</span>
              </div>
            </div>
            <div class="vote-player">
              {{ item.nickName }}
            </div>
            <button class="btn vote-btn small block">投票</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import CloudCard from "@/pages/components/CloudCard";
import Schedule from "@/pages/components/Schedule";
import PinkSearchBar from "@/pages/components/PinkSearchBar";

export default {
  components: {
    Schedule,
    CloudCard,
    PinkSearchBar
  },
  name: "ShortVideoVote",
  data() {
    return {
      voteList: [
        {
          "number": 12,
          "nickName": "张三12",
          "headImgUrl": "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
          "ticketNum": 1,
          "rank": 13
        },
        {
          "number": 15,
          "nickName": "示例15",
          "headImgUrl": "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com:443/dmMatch/jpg/2111588183.jpg",
          "ticketNum": 0,
          "rank": 15
        },
        {
          "number": 14,
          "nickName": "示例14",
          "headImgUrl": "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com:443/dmMatch/jpg/2111588183.jpg",
          "ticketNum": 0,
          "rank": 14
        },
        {
          "number": 10,
          "nickName": "张三10",
          "headImgUrl": "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
          "ticketNum": 1,
          "rank": 11
        },
        {
          "number": 11,
          "nickName": "张三11",
          "headImgUrl": "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
          "ticketNum": 1,
          "rank": 12
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.info-card {
  width: px2rem(700px);
  height: px2rem(721px);
  margin: px2rem(11px) auto 0 auto;
  box-sizing: border-box;
  padding-top: px2rem(47px);
}

.card-btn {
  margin: px2rem(44px) auto 0 auto;
}
.search-row {
  margin-top: px2rem(44px);
}

.grid-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: px2rem(26px) px2rem(77px-25px) px2rem(52px) px2rem(77px-25px);
  .grid-card:nth-child(2n) {
    margin-right: 0;
  }

  .grid-card {
    margin-right: px2rem(24px);
    display: inline-flex;
    width: px2rem(280px);
    height: px2rem(341px);
    border-radius: px2rem(10px);
    background-image: linear-gradient(180deg, #1A0073 0%, #0027D2 100%);
    margin-bottom: px2rem(30px);
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}

.card.vote-card {
  height: initial;
}
.vote-rank {
  width: px2rem(183px);
  display: inline-flex;
  justify-content: space-around;
  color: #fff;
  font-size: px2rem(24px);
  margin-bottom: px2rem(5px);
  align-items: center;

}

.video-box {
  position: relative;
  width: px2rem(250px);
  height: px2rem(160px);
  overflow: hidden;
  background: #f1f1f1;

  .vote-badge {
    position: absolute;
    box-sizing: border-box;
    padding: 0 px2rem(10px);
    text-align:center;
    width: px2rem(105px);
    height: px2rem(36px);
    bottom: 0;
    left: 0;
    opacity: 0.85;
    background: #FF3F9B;
    color: $lightFontColor;
    border-radius: 0 px2rem(20px) 0 0;
    justify-content: center;
    font-size: px2rem(24px);
    align-items: center;

    .video-thumb {
      width: px2rem(18px);
      height: px2rem(21px);
    }
  }

  .vote-avatar {
    width: px2rem(250px);
    height: px2rem(160px);
  }

}

.vote-player {
  //margin-top: px2rem(13px);
  //margin-bottom: px2rem(13px);
  font-size: px2rem(24px);
  line-height: px2rem(30px);
  margin-top: px2rem(10px);
  color: #fff;
}

.fire-icon {
  width: px2rem(23px);
  height: px2rem(33px);
  transform: translateY(px2rem(-3px));
}

.rank-col {
  height: px2rem(33px);
  line-height: px2rem(33px);
}

.vote-btn {
  margin-top: px2rem(9px);
  width: px2rem(251px);
  height: px2rem(50px);
  background: #FF7CBB;
  border-radius: px2rem(10px);
  color:$lightFontColor;
  border: none;
  outline: none;
}
</style>